<template>
  <view class="flex_left_right container tab_bar_container">
    <view class="flex_right wrapper" v-for="(item, index) in tabBarList" :key="index" @click="changeTabBarFun(index)">
      <view class="tab_bar_row">
        <image :src="currentImage(index)" />
        <view>{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, PropType } from 'vue';
import { useNavigatePage } from '@/hooks/navigateTo';
const props = defineProps({
  index: {
    type: Number as PropType<number>, // 明确类型为 string
    required: true,
    default: () => 0
  }
});
const currentIndex = ref(0);
const navigatePage = useNavigatePage();
const currentImage = computed(() => (index: number) => currentIndex.value == index ? tabBarList.value[index].selectedIconPath : tabBarList.value[index].iconPath);
const tabBarList = ref([
  {
    pagePath: '/pages/index/index',
    text: '首页',
    iconPath: '/static/tabBar/home.png',
    selectedIconPath: '/static/tabBar/home_active.png'
  },
  {
    pagePath: '/pages/form/index',
    text: '表单',
    iconPath: '/static/tabBar/home.png',
    selectedIconPath: '/static/tabBar/home_active.png'
  },
  {
    pagePath: '/pages/order/index',
    text: '订单1',
    iconPath: '/static/tabBar/home.png',
    selectedIconPath: '/static/tabBar/home_active.png'
  },
  {
    pagePath: '/pages/userCenter/index',
    text: '我的',
    iconPath: '/static/tabBar/home.png',
    selectedIconPath: '/static/tabBar/home_active.png'
  }
]);
const changeTabBarFun = (index: number) => {
  currentIndex.value = index;
  navigatePage.navigateTo(tabBarList.value[index].pagePath);
};
onMounted(() => (currentIndex.value = props.index));
</script>
<style scoped lang="scss">
.tab_bar_container {
  border-top-width: 0.5px !important;
  border-color: #dadbde !important;
  border-top-style: solid;
  background-color: #fff;
  .tab_bar_row {
    text-align: center;
    padding: 10rpx 0;
    image {
      width: 38rpx;
      height: 38rpx;
      object-fit: cover;
    }
  }
}
</style>
